<template>
  <view class="page align-center">
    <image class="flex-sub" style="width: 100%"
      :src="`${IMAGE_URL}/profile/content/2025/04/28/owgFSeYnyrqg33bbcfa4979d35dfdef026752c97d2a2_20250428140434A001.png`"
      mode="widthFix"></image>

    <view class="main text-center flex-sub">
      <view class="margin-top-lg">
        <image style="width: 150rpx" src="/static/images/img-hand.svg" mode="widthFix"></image>
      </view>

      <!-- 登录跳转按钮 -->
      <view class="margin-top">
        <up-text align="left" text="开启孩子学习成长的奇妙旅程，" size="28rpx"></up-text>
        <up-text align="left" text="家长老师辅助学习的得力伙伴等您来探索!" size="28rpx" margin="30rpx 0 0 0"></up-text>
      </view>
      <view class="margin-top-xl">
        <up-button text="微信注册/登录" shape="circle" color="#6DCE67" icon="/static/images/icon-wechat.png"
          :customStyle="{ height: '48px' }" size="large" @click="handleAgreement('wechat')"></up-button>
        <up-button block text="手机号登录/注册" shape="circle" color="#7DA02F" plain icon="/static/images/icon-phone.svg"
          :customStyle="{
            marginTop: '28rpx',
            background: 'transparent',
            height: '48px'
          }" size="large" @click="handleAgreement('sms')"></up-button>
      </view>

      <!-- 用户协议 -->
      <view class="flex justify-center align-center margin-bottom-sm margin-top">
        <up-checkbox-group v-model="agreement">
          <up-checkbox shape="circle" activeColor="#6DCE67">
            测试
          </up-checkbox>
        </up-checkbox-group>
        <view style="margin-top: -2px">
          <text class="text-sm">登录即表明同意</text>
          <text class="text-sm" style="color: #7da02f">《用户协议》</text>
          <text class="text-sm">和</text>
          <text class="text-sm" style="color: #7da02f">《隐私政策》</text>
        </view>
      </view>

      <!-- 同意协议提示弹窗 -->
      <view class="mask" v-if="show">
        <view class="agreen-modal">
          <view>
            <up-text text="服务以及隐私保护" :size="20" align="center" style="font-weight: 400"></up-text>
            <view class="text-left text-df margin-tb-lg">
              <text class="text-muted">
                为了更好的保护您的合法权益，我们严格遵循隐私政策，对您的信息进行保密处理，防止信息泄露。请您仔细阅读
              </text>
              <text @click="handlePrivacy" style="color: #97b84b">《隐私政策》
              </text>
              <text class="text-muted">和</text>
              <text @click="handlePrivacy" style="color: #97b84b">《服务协议》
              </text>
            </view>
            <view class="margin-top-sm">
              <u-button text="同意并继续" shape="circle" color="#97B84B" @click="goNext"
                customerStyle="height:37px"></u-button>
              <u-text :size="14" color="#D9D9D9" text="暂不登录/注册" align="center" margin="10px 0 0 0"
                @click="show = false"></u-text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { IMAGE_URL } from '@/utils/env';
import { wxLoginApi } from '@/api/api';
import { getUserInfoApi } from '@/api/me';
import { setUserInfo } from '@/utils/auth'
const agreement = ref(false);
const show = ref(false);
const loginType = ref('');
// 微信登录注册
const handleWechatRegister = () => {
  // uni.$u.toast('正在开发中...');
  // return;
  uni.login({
    "provider": "weixin",
    "onlyAuthorize": true, // 微信登录仅请求授权认证
    success: async (event) => {
      const { code } = event
      console.log(code)
      // 获取微信 code
      // uni.showToast({
      //   title: code
      // });
      const params = {
        code,
        encrytedIv: "888",
        encrytedData: "888"
      };
      const result = await wxLoginApi(params);
      console.log('result', result)
      if (result.code === 200) {
        uni.showToast({
          title: '登录成功',
          icon: 'none'
        });
        setUserInfo('token', result.token);
        // 如果是老用户，根据获取用户信息，判断是老师还是家长，跳转到不同的页面
        if (result.exists === 1) {
          getUserInfo();
        } else {
          uni.navigateTo({
            url: '/pages-sub/login/index'
          });
        }
      } else {
        uni.showToast({
          title: result.msg,
          icon: 'none'
        });
      }
    },
    fail: (err) => {
      console.log(err)
      uni.showModal({
        title: '提示',
        content: err,
        showCancel: false
      });
    },
  });
};

// 是否同意协议
const handleAgreement = (type) => {
  loginType.value = type;
  if (!agreement.value) {
    show.value = true;
    return false;
  } else {
    goNext()
  }
};

const goNext = () => {
  console.log(loginType.value)
  show.value = false;
  if (loginType.value === 'wechat') {
    // 处理微信注册逻辑
    handleWechatRegister();
  } else if (loginType.value === 'sms') {
    uni.navigateTo({
      url: '/pages-sub/login/sms'
    });
  }
};
const handlePrivacy = () => {
  // 跳转到隐私政策页面
  console.log('查看隐私政策');
};
const getUserInfo = async () => {
  const result = await getUserInfoApi();
  if (result.code === 200) {
    setUserInfo('userInfo', result.data);
    uni.switchTab({
      url: '/pages/index/index'
    });
  }
};
</script>
<style lang="scss" scoped>
.mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 999;

  .agreen-modal {
    width: 70vw;
    background: #fff;
    border-radius: 20rpx;
    padding: 36rpx;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    background: white;
    transform: translate(-50%, -50%);
  }
}
</style>
